<template>
  <el-tag
    v-if="!color"
    :type="type"
  >
    {{ showText }}
  </el-tag>
  <el-tag
    v-else
    :color="color"
  >
    {{ showText }}
  </el-tag>
</template>

<script>
import Vue from 'vue';
import {Tag} from "element-ui";

Vue.use(Tag);
/**
 * 状态标签
 * @author maolin
 */
export default {
  name: "ErpViewStatus",
  props: {
    /**
     * 默认值
     * @public
     */
    value: {
      type: [String, Number],
      default: ''
    },
    /**
     * 行数据
     * @public
     */
    row: {
      type: Object,
      default () {
        return {};
      }
    },
    /**
     * 额外配置
     * ```js
     * return {
          // 若不设置，则为value
          showTextProp: "statusShowText",
          // type:success/info/warning/danger/''
          type: "",
          // 若有typeFunction， 则不解析type
          typeFunction: "if (value == 10) {return ''} else {return 'danger'}",
          // 背景色 若有color，则type和typeFunction不生效
          color: ''
        }
     * ```
     * @public
     */
    extra: {
      default () {
        return {
          // 若不设置，则为value
          showTextProp: "statusShowText",
          // type:success/info/warning/danger/''
          type: "",
          // 若有typeFunction， 则不解析type
          typeFunction: "if (value == 10) {return ''} else {return 'danger'}",
          // 背景色 若有color，则type和typeFunction不生效
          color: ''
        };
      }
    }
  },
  computed: {
    showText () {
      if (this.extra && this.extra.showTextProp) {
        return this.row[this.extra.showTextProp];
      } else {
        return this.value;
      }
    },
    type () {
      if (this.color) {
        return "";
      }
      let typeFunction = this.extra && this.extra.typeFunction ? this.extra.typeFunction : '';
      let type = '';
      if (typeFunction) {
        try{
          type = new Function('row', 'value', typeFunction)(this.row, this.value);
        }catch(e) {
          console.log(e);
        }
      }else {
        type = this.extra && this.extra.type ? this.extra.type : '';
      }
      return type;
    },
    color () {
      return this.extra && this.extra.color ? this.extra.color : false;
    }
  }
};
</script>

<style scoped>

</style>
